{include file="public/header" select="0" /}
<body class="hide-top">
<div class="login-container">
    <img src="/static/index/img/icon37.png" alt="">
    <div class="login-content register-content">
        <p>您好，欢迎注册</p>
        <form action="{:url('register/save')}" method="post" class="form layui-form">
        <ul class="login-list">
            <li>
                <p>手机号</p>
                <div>
                    <input type="number" id="mobile" name="mobile" lay-verify="required" lay-reqtext="请输入手机号"
                           placeholder="请输入手机号" autocomplete="off">
                </div>
            </li>
            <li>
                <p>短信验证码</p>
                <div>
                    <input type="text" name="captcha" lay-verify="required" lay-reqtext="请输入短信验证码"
                           placeholder="请输入短信验证码" autocomplete="off">
                    <p class="code code1">获取验证码</p>
                    <p class="code code2"></p>
                </div>
            </li>
            <li>
                <p>昵称</p>
                <div>
                    <input type="text" name="nickname" lay-verify="required" lay-reqtext="请输入昵称"
                           placeholder="请输入昵称" autocomplete="off">
                </div>
            </li>
            <li>
                <p>登录密码</p>
                <div>
                    <input type="password" name="password" lay-verify="required" lay-reqtext="请输入登录密码"
                           placeholder="请输入登录密码">
                </div>
            </li>
            <li>
                <p>确认登录密码</p>
                <div>
                    <input type="password" name="password_confirm" lay-verify="required" lay-reqtext="请确认登录密码"
                           placeholder="请确认登录密码">
                </div>
            </li>
            <li>
                <p>支付密码</p>
                <div>
                    <input type="password" name="pay_password" lay-verify="required" lay-reqtext="请输入支付密码"
                           placeholder="请输入支付密码">
                </div>
            </li>
            <li>
                <p>确认支付密码</p>
                <div>
                    <input type="password" name="pay_password_confirm" lay-verify="required" lay-reqtext="请确认支付密码"
                           placeholder="请确认支付密码">
                </div>
            </li>
            <li>
                <p>邀请码</p>
                <div>
                    <input type="text" name="parent_code" lay-verify="required" lay-reqtext="请输入邀请码"
                           placeholder="请输入邀请码" autocomplete="off"
                           {if $Request.param.code}readonly value="{$Request.param.code}"{/if}>
                </div>
            </li>
        </ul>
        <p class="register-agr">
            <input type="checkbox" name="agree" lay-skin="primary" value="1" checked>我已阅读并同意
            <a style="color: var(--bc);" href="{:url('index/communal')}?type=register_msg" class="toggle">《注册协议》</a>
            和
            <a style="color: var(--bc);" href="{:url('index/communal')}?type=privacy_msg" class="toggle">《隐私协议》</a>
        </p>
        <p class="save" lay-submit lay-filter="save" formObj=".form">立即注册</p>
        </form>
        <p class="flex-center login-number">已有账号？<a href="{:url('login/index')}">立即登录</a></p>
    </div>
</div>
{include file="public/footer" select="0" /}
<script>
    var os = true;
    var time = 60;
    $('.code2').hide();
    $('.code1').click(function () {
        var mobile = $('#mobile').val();
        if (!mobile) {
            layer.msg('请输入手机号');
            return false;
        }
        if (os !== true) return false;
        os = false;
        layer.load(2);
        $.ajax({
            type: "POST",
            url: "{:url('userCode/sendSms')}",
            data: {mobile: mobile, action: 'register'},
            success: function (data) {
                layer.closeAll();
                if (data.code === 1) {
                    layer.msg(data.msg, {time: 1500}, function () {
                        $('.code2').html(time + 's');
                        time--;
                        $('.code1').hide().siblings('.code2').show();
                        let isTime = setInterval(() => {
                            if (time == 0) {
                                clearInterval(isTime);
                                time = 60;
                                $('.code2').hide().siblings('.code1').show();
                                os = true;
                            }
                            $('.code2').html(time-- + 's')
                        }, 1000);
                    });
                } else {
                    os = true;
                    layer.msg(data.msg);
                }
            }
        });
    });
</script>
</body>
</html>